import React, { useEffect, useState } from 'react';
import s from './style.module.css';
import i from '@/index.module.css';
import cn from 'classnames';
import moment from 'moment';
import { getDomainList, siteLockLogApi } from '~/API';
import { getErrorMessage } from '@/common/constant';
import { Select, Datetime, Button, Pagination, Table, Message } from '@knownsec/react-component';
const lockOption = [
  { label: '在线锁', value: 'always_online' },
  { label: '防黑锁', value: 'cache_url' },
];
export default function SiteLog({ cache }) {
  const dateFormat = 'YYYY-MM-DD';
  const today = [moment().subtract(6, 'month').add(1, 'day'), moment()];
  const [now, setNow] = useState(today);
  const [tableData, setTableData] = useState([]);
  const [loading, setLoading] = useState(false);
  const defaults = {
    最近24h: [moment().subtract(24, 'hours'), moment()],
    最近7天: [moment().subtract(6, 'days').hours(0).minutes(0).seconds(0), moment()],
    最近30天: [moment().subtract(29, 'days').hours(0).minutes(0).seconds(0), moment()],
  };
  const [filter, setFilter] = useState({
    cache_type: cache || '',
    domain: '',
    start_date: now[0].format(dateFormat),
    end_date: now[1].format(dateFormat),
    page: 1,
    pageSize: 10,
  });
  const column = [
    { title: '站锁类型', dataIndex: 'cache_type', key: 'cache_type' },
    { title: '开始时间', dataIndex: 'create_time', key: 'create_time' },
    {
      title: 'URL',
      dataIndex: 'url',
      key: 'url',
      render: (cur, item) => {
        return (
          <>
            {cur.map((i, idx) => (
              <p key={idx}>{i}</p>
            ))}
          </>
        );
      },
    },
    { title: '状态', dataIndex: 'status', key: 'status' },
  ];
  const [domainList, setDomainList] = useState([]);
  const disabledate = (current) => {
    return current > moment() || current < moment().subtract(6, 'month');
  };
  const changeTime = (val) => {
    setNow(val);
  };
  useEffect(() => {
    getDomainList('GET').then((res) => {
      const arr = res.data.map((item) => {
        return { label: item.domain, value: item.domain };
      });
      setDomainList(arr);
    });
    setLoading(true);
    siteLockLogApi('GET', filter).then((res) => {
      setLoading(false);
      setTableData(res.data.data);
    });
  }, []);
  const queryItem = (obj = null) => {
    const f = obj ? obj : filter;
    setLoading(true);
    siteLockLogApi('GET', f)
      .then((res) => {
        setLoading(false);
        setTableData(res.data.data);
      })
      .catch((err) => Message.show({ type: 'error', message: getErrorMessage(err) }));
  };
  return (
    <div className={cn(i.pt24, i.pl20, i.pr20)}>
      <div className={cn(i.df, i.aic)}>
        <Select
          placeholder="请选择站锁类型"
          className={i.w200}
          option={lockOption}
          value={[filter.cache_type]}
          onChange={({ selectedItem }) => {
            const obj = Object.assign({}, filter);
            obj.cache_type = selectedItem[0].value;
            setFilter(obj);
          }}
        />
        <Select
          placeholder="请选择域名"
          className={i.ml10}
          option={domainList}
          value={[filter.domain]}
          onChange={({ selectedItem }) => {
            const obj = Object.assign({}, filter);
            obj.domain = selectedItem[0].value;
            setFilter(obj);
          }}
        />
        <div className={cn(i.pr, i.dib)}>
          <Datetime
            disabledDate={disabledate}
            useDefault={defaults}
            semiYear
            allowClear={false}
            value={now}
            format={dateFormat}
            showTime={false}
            className={cn(i.ml10, s.dt)}
            onChange={changeTime}
          />
        </div>
        <Button type="primary" className={cn(i.ml10)} onClick={() => queryItem()}>
          查询
        </Button>
        <Button
          type="default"
          className={i.ml10}
          onClick={() => {
            const obj = {
              page: 1,
              pageSize: 10,
              domain: '',
              cache_type: '',
              start_date: '',
              end_date: '',
            };
            setFilter(obj);
            queryItem(obj);
          }}
        >
          重置
        </Button>
      </div>
      <div className={i.mt20}>
        <Table 
          columns={column}
          tableLoading={loading} 
          loadingLabel=""
          data={tableData} />
      </div>
      <div className={cn(i.df, i.jcfe, i.mt20, i.mb20)}>
        {tableData.length > 10 && <Pagination
          current={Number(filter?.page || 1)}
          showQuickJumper={{ goButton: true }}
          showSizeChanger={true}
          pageSizeOptions={['10', '20', '50']}
          total={tableData.length}
          // pageSize={filter.pageSize}
          onChange={(page, pageSize) => {
            const obj = Object.assign({}, filter);
            obj.page = page;
            obj.pageSize = pageSize;
            setFilter(obj);
            queryItem(obj);
          }}
        />}
      </div>
    </div>
  );
}
